<template>
  <div class="p-5 w-1/2">
    <div class="desc leading-8 border border-dashed px-4 py-2 mb-5 bg-white">
      <p><b>img</b> 使用 <b>ant-design-vue</b> 中的 <b>Image</b> 组件回显;</p>
      <p><b>pdf</b> 预览使用 <b>iframe</b> 进行回显;</p>
      <p><b>docx</b> 预览使用 <b>docx-preview</b> 组件。</p>
    </div>

    <h3 class="font-bold">文件上传</h3>
    <DtUpload
        :max-count="4"
        :accept="['.jpg', '.jpeg', '.txt']"
        :defaultFiles="fileList"
        :disabled="true"
    ></DtUpload>

    <h3 class="mt-10 font-bold">图片上传</h3>
    <DtUpload
        :defaultFiles="[]"
        :max-count="2"
        :list-type="'picture-card'"
    ></DtUpload>
  </div>
</template>

<script lang="ts" setup>
const fileList = ref([
  {
    fileName: '测试',
    fileId: '1'
  }
])

// 正常的fileId 应该是一个字符串，这里使用文件名进行提取文件
setTimeout(() => {
  fileList.value = [
    {
      fileName: '唯美湖畔风景.jpg',
      fileId: '测试图片.jpg'
    },
    {
      fileName: '测试pdf.pdf',
      fileId: '滴滴电子发票.pdf'
    },
    {
      fileName: '测试docx文件.docx',
      fileId: '测试文档.docx'
    }
  ]
}, 2000)
</script>

<style lang="less" scoped>
.desc{
  border-color: @primary-color;
  p{
    margin: 0;
    color: @primary-color;
  }
}
</style>